<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>摩捷-元宵节</title>
	<link rel="stylesheet" type="text/css" href="lib/mui/css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="lib/swiper/css/swiper.min.css" />
	<link rel="stylesheet" type="text/css" href="lib/swiper/css/animate.min.css" />
	<link rel="stylesheet" href="lib/nprogress/nprogress.css">
	<link rel="stylesheet" type="text/css" href="css/index.css" />

	<!--生产环境less-->
	<!-- <link rel="stylesheet" type="text/less" href="less/index.less" />
	<script src="lib/less/less.min.js" type="text/javascript" charset="utf-8"></script> -->
</head>

<body>
	<!--音乐-->
	<!-- <audio id="musicStar" src="images/music.mp3" autoplay="true" preload="auto" loop="loop" style="display: none;"></audio> -->

	<!--音乐带动画-->
	<audio src="images/music.mp3" loop="loop" style="display: none;" id="music"></audio>
	<a class="music_btn music_on"><img src="images/music_on.png" /><s></s><s></s><s></s></a>

	<div class="h5_container">

		<!--swiper-->
		<div class="swiper-container">

			<div class="swiper-wrapper">

				<div class="swiper-slide swiper-no-swiping screen1">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="tu1">
								<img src="images/01_tu.jpg" alt="">
							</div>
							<div class="logo">
								<img src="images/logo.png" alt="">
							</div>
							<div class="lamp_r ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_r.png" alt="">
							</div>
							<div class="lamp_l ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_l.png" alt="">
							</div>
							<div class="lamp">
								<img src="images/lamp.png" alt="">
							</div>
							<div class="lion_head ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lion_head.png" alt="">
							</div>
							<div class="riddle">
								<div class="riddle_content ani" swiper-animate-effect="riddle_ani" swiper-animate-duration="1s"
								 swiper-animate-delay="0s">
									<div class="wz_title">
										庆元宵<br />猜灯谜
									</div>
									<div class="wz_content">
										摩捷送好礼
									</div>
								</div>
								<div class="riddle_bottom">
									<img src="images/riddle_bottom.png" alt="">
								</div>
							</div>
							<div class="start">
								<img src="images/start.png" alt="">
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide swiper-no-swiping screen2">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="tu1">
								<img src="images/02_tu.jpg" alt="">
							</div>
							<div class="logo">
								<img src="images/logo.png" alt="">
							</div>
							<div class="lamp_r ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_r.png" alt="">
							</div>
							<div class="lamp_l ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_l.png" alt="">
							</div>
							<div class="lamp">
								<img src="images/lamp.png" alt="">
							</div>
							<div class="lion_head ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lion_head.png" alt="">
							</div>
							<div class="riddle">
								<div class="riddle_content ani" swiper-animate-effect="riddle_ani" swiper-animate-duration="1s"
								 swiper-animate-delay="0s">
									<div class="wz_title">
										赶走魔鬼<br />有一手
									</div>
									<div class="wz_content">
										<ul>
											<li data-id="A">A.摩</li>
											<li data-id="B">B.魔</li>
											<li data-id="C">C.魇</li>
										</ul>
									</div>
								</div>
								<div class="riddle_bottom">
									<img src="images/riddle_bottom.png" alt="">
								</div>
							</div>
							<div class="next">
								<img src="images/next.png" alt="">
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide swiper-no-swiping screen3">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="tu1">
								<img src="images/03_tu.jpg" alt="">
							</div>
							<div class="logo">
								<img src="images/logo.png" alt="">
							</div>
							<div class="lamp_r ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_r.png" alt="">
							</div>
							<div class="lamp_l ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_l.png" alt="">
							</div>
							<div class="lamp">
								<img src="images/lamp.png" alt="">
							</div>
							<div class="lion_head ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lion_head.png" alt="">
							</div>
							<div class="riddle">
								<div class="riddle_content ani" swiper-animate-effect="riddle_ani" swiper-animate-duration="1s"
								 swiper-animate-delay="0s">
									<div class="wz_title">
										睫不见目<br />手来凑
									</div>
									<div class="wz_content">
										<ul>
											<li data-id="A">A.艮</li>
											<li data-id="B">B.睛</li>
											<li data-id="C">C.捷</li>
										</ul>
									</div>
								</div>
								<div class="riddle_bottom">
									<img src="images/riddle_bottom.png" alt="">
								</div>
							</div>
							<div class="next">
								<img src="images/next.png" alt="">
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide swiper-no-swiping screen4">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="tu1">
								<img src="images/04_tu.jpg" alt="">
							</div>
							<div class="logo">
								<img src="images/logo.png" alt="">
							</div>
							<div class="lamp_r ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_r.png" alt="">
							</div>
							<div class="lamp_l ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_l.png" alt="">
							</div>
							<div class="lamp">
								<img src="images/lamp.png" alt="">
							</div>
							<div class="lion_head ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lion_head.png" alt="">
							</div>
							<div class="riddle">
								<div class="riddle_content ani" swiper-animate-effect="riddle_ani" swiper-animate-duration="1s"
								 swiper-animate-delay="0s">
									<div class="wz_title">
										一山更比<br />一山高
									</div>
									<div class="wz_content">
										<ul>
											<li data-id="A">A.山</li>
											<li data-id="B">B.出</li>
											<li data-id="C">C.屾</li>
										</ul>
									</div>
								</div>
								<div class="riddle_bottom">
									<img src="images/riddle_bottom.png" alt="">
								</div>
							</div>
							<div class="next">
								<img src="images/next.png" alt="">
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide swiper-no-swiping screen5">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="tu1">
								<img src="images/05_tu.jpg" alt="">
							</div>
							<div class="logo">
								<img src="images/logo.png" alt="">
							</div>
							<div class="lamp_r ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_r.png" alt="">
							</div>
							<div class="lamp_l ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_l.png" alt="">
							</div>
							<div class="lamp">
								<img src="images/lamp.png" alt="">
							</div>
							<div class="lion_head ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lion_head.png" alt="">
							</div>
							<div class="riddle">
								<div class="riddle_content ani" swiper-animate-effect="riddle_ani" swiper-animate-duration="1s"
								 swiper-animate-delay="0s">
									<div class="wz_title">
										街中积土<br />要清除
									</div>
									<div class="wz_content">
										<ul>
											<li data-id="A">A.行</li>
											<li data-id="B">B.封</li>
											<li data-id="C">C.圭</li>
										</ul>
									</div>
								</div>
								<div class="riddle_bottom">
									<img src="images/riddle_bottom.png" alt="">
								</div>
							</div>
							<div class="next">
								<img src="images/next.png" alt="">
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide swiper-no-swiping screen6">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="tu1">
								<img src="images/06_tu.jpg" alt="">
							</div>
							<div class="logo">
								<img src="images/logo.png" alt="">
							</div>
							<div class="lamp_r ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_r.png" alt="">
							</div>
							<div class="lamp_l ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_l.png" alt="">
							</div>
							<div class="lamp">
								<img src="images/lamp.png" alt="">
							</div>
							<div class="lion_head ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lion_head.png" alt="">
							</div>
							<div class="riddle">
								<div class="riddle_content ani" swiper-animate-effect="riddle_ani" swiper-animate-duration="1s"
								 swiper-animate-delay="0s">
									<div class="wz_title">
										欲把公园<br />围墙拆
									</div>
									<div class="wz_content">
										<ul>
											<li data-id="A">A.韦</li>
											<li data-id="B">B.元</li>
											<li data-id="C">C.口</li>
										</ul>
									</div>
								</div>
								<div class="riddle_bottom">
									<img src="images/riddle_bottom.png" alt="">
								</div>
							</div>
							<div class="next">
								<img src="images/next.png" alt="">
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide swiper-no-swiping screen7">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="tu1">
								<img src="images/07_tu.jpg" alt="">
							</div>
							<div class="logo">
								<img src="images/logo.png" alt="">
							</div>
							<div class="lamp_r ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_r.png" alt="">
							</div>
							<div class="lamp_l ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_l.png" alt="">
							</div>
							<div class="lamp">
								<img src="images/lamp.png" alt="">
							</div>
							<div class="lion_head ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lion_head.png" alt="">
							</div>
							<div class="riddle">
								<div class="riddle_content ani" swiper-animate-effect="riddle_ani" swiper-animate-duration="1s"
								 swiper-animate-delay="0s">
									<div class="wz_title">
										老赵一走<br />寸难守
									</div>
									<div class="wz_content">
										<ul>
											<li data-id="A">A.趙</li>
											<li data-id="B">B.肖</li>
											<li data-id="C">C.宵</li>
										</ul>
									</div>
								</div>
								<div class="riddle_bottom">
									<img src="images/riddle_bottom.png" alt="">
								</div>
							</div>
							<div class="next">
								<img src="images/next.png" alt="">
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide swiper-no-swiping screen8">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="tu1">
								<img src="images/08_tu.jpg" alt="">
							</div>
							<div class="logo">
								<img src="images/logo.png" alt="">
							</div>
							<div class="lamp_r ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_r.png" alt="">
							</div>
							<div class="lamp_l ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_l.png" alt="">
							</div>
							<div class="lamp">
								<img src="images/lamp.png" alt="">
							</div>
							<div class="lion_head ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lion_head.png" alt="">
							</div>
							<div class="riddle">
								<div class="riddle_content ani" swiper-animate-effect="riddle_ani" swiper-animate-duration="1s"
								 swiper-animate-delay="0s">
									<div class="wz_title">
										块土掉失<br />却有心
									</div>
									<div class="wz_content">
										<ul>
											<li data-id="A">A.快</li>
											<li data-id="B">B.缺</li>
											<li data-id="C">C.炔</li>
										</ul>
									</div>
								</div>
								<div class="riddle_bottom">
									<img src="images/riddle_bottom.png" alt="">
								</div>
							</div>
							<div class="next">
								<img src="images/next.png" alt="">
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide swiper-no-swiping screen9">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="tu1">
								<img src="images/09_tu.jpg" alt="">
							</div>
							<div class="logo">
								<img src="images/logo.png" alt="">
							</div>
							<div class="lamp_r ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_r.png" alt="">
							</div>
							<div class="lamp_l ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lamp_l.png" alt="">
							</div>
							<div class="lamp">
								<img src="images/lamp.png" alt="">
							</div>
							<div class="lion_head ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/lion_head.png" alt="">
							</div>
							<div class="riddle">
								<div class="riddle_content ani" swiper-animate-effect="riddle_ani" swiper-animate-duration="1s"
								 swiper-animate-delay="0s">
									<div class="wz_title">
										微光闪烁<br />不见火
									</div>
									<div class="wz_content">
										<ul>
											<li data-id="A">A.砾</li>
											<li data-id="B">B.烁</li>
											<li data-id="C">C.乐</li>
										</ul>
									</div>
								</div>
								<div class="riddle_bottom">
									<img src="images/riddle_bottom.png" alt="">
								</div>
							</div>
							<div class="next next_end">
								<img src="images/next.png" alt="">
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide swiper-no-swiping screen10">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<div class="tu1">
								<img src="images/10_tu.jpg" alt="">
							</div>
							<div class="tu2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/success_cloud_l.png" alt="">
							</div>
							<div class="tu3 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0s">
								<img src="images/success_cloud_r.png" alt="">
							</div>
							<div class="success">
								<div class="lion ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
									<img src="images/success_lion_head.png" alt="">
								</div>
								<div class="msg">恭喜！您全部答对了<br />提交信息可参与抽奖</div>
								<div class="user_info">
									<ul>
										<li>姓名：<input type="text" class="username"></li>
										<li>电话：<input type="text" class="userphone"></li>
									</ul>
									<div class="submit">
										<span>提交</span>
									</div>
								</div>
							</div>
							<div class="error">
								<div class="lion ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
									<img src="images/error_lion_head.png" alt="">
								</div>
								<div class="msg">抱歉！您没有完全答对<br />您可以</div>
								<div class="xuan">
									<img src="images/error_x1.jpg" alt="" class="again">
									<img src="images/error_x2.jpg" alt="" class="invitation">
								</div>
							</div>
							<div class="fenxiang">
								<img src="images/fenxiang.png" alt="">
							</div>
						</div>
					</div>
				</div>

			</div>

			<!-- 如果需要导航按钮 -->
			<!--<div class="swiper-button-prev swiper-button-black"></div>
				<div class="swiper-button-next swiper-button-black"></div>-->

		</div>
	</div>

	<script src="lib/jquery/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/mui/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/swiper/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/swiper/js/swiper.animate1.0.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/nprogress/nprogress.js"></script>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>